<template>
    <div class="Father">
        <h2>父组件</h2>
        <h3>存款：{{ money }}</h3>
        <h3>车的品牌{{ car.brand }}，车的价格{{ car.price }}</h3>
        <Child></Child>
    </div>
</template>

<script lang="ts" setup name="Father">
    import Child from "./Child.vue"
    import {ref,reactive,provide} from "vue";

    //数据
    let money = ref(100)
    let car = reactive({
        brand:"奔驰",
        price:100
    })
    //方法
    function updateMoney(val:number){
        money.value -= val
    }

    provide('money',{money,updateMoney}) //money不能加.value，否则孙组件中money失去响应式；不加.value，简写形式money:money
    provide('car',car)

</script>

<style scoped>
.Father{
    background-color: skyblue;
    height: 600px;
}
</style>